<template>
  <div class="top">
    <div class="container">
      <ul class="item left">
        <li class="china" @mouseenter="chinaActive = true" @mouseleave="chinaActive = false">
          中国大陆
          <i class="iconfont iconjiantouxia xiaj"></i>
          <ul class="yuyan" v-show="chinaActive">
            <li>全球</li>
            <li>中国大陆</li>
            <li>中国香港</li>
            <li>中国台湾</li>
            <li>中国澳门</li>
            <li>韩国</li>
            <li>马来西亚</li>
            <li>澳大利亚</li>
            <li>新加坡</li>
            <li>新西兰</li>
            <li>加拿大</li>
            <li>美国</li>
            <li>日本</li>
          </ul>
        </li>
        <li>
          <span class="login">亲，请登录</span>
          <span class="register">免费注册</span>
        </li>
        <li class="phonet">手机逛淘宝</li>
      </ul>
      <ul class="item right">
        <li
          class="myTaoBao nhover"
          @mouseenter="myTaoBaoActive = true"
          @mouseleave="myTaoBaoActive = false"
        >
          <a>我的淘宝</a>
          <i class="iconfont iconjiantouxia xiaj"></i>
          <ul class="myTaoBaoList" v-show="myTaoBaoActive">
            <li>已买到的宝贝</li>
            <li>我的足迹</li>
          </ul>
        </li>
        <li>
          <i class="iconfont icongouwuche hong"></i>
          购物车
          <i class="iconfont iconjiantouxia xiaj"></i>
        </li>
        <li
          class="bookmark nhover"
          @mouseenter="bookmarkActive = true"
          @mouseleave="bookmarkActive = false"
        >
          <a>
            <i class="iconfont iconwujiaoxing hui"></i>
            收藏夹
          </a>
          <i class="iconfont iconjiantouxia xiaj"></i>
          <ul class="bookmarkList" v-show="bookmarkActive">
            <li>收藏的宝贝</li>
            <li>收藏的店铺</li>
          </ul>
        </li>
        <li>商品分类</li>
        <li class="shux">|</li>
        <li
          class="seller nhover"
          @mouseenter="sellerActive = true"
          @mouseleave="sellerActive = false"
        >
          <a>千牛卖家中心</a>
          <i class="iconfont iconjiantouxia xiaj"></i>
          <ul class="sellerList" v-show="sellerActive">
            <li>免费开店</li>
            <li>已卖出的宝贝</li>
            <li>出售中的宝贝</li>
            <li>卖家服务市场</li>
            <li>卖家培训中心</li>
            <li>体检中心</li>
            <li>问商友</li>
          </ul>
        </li>
        <li
          class="contactService nhover"
          @mouseenter="contactServiceActive = true"
          @mouseleave="contactServiceActive = false"
        >
          <a>联系客服</a>
          <i class="iconfont iconjiantouxia xiaj"></i>
          <ul class="contactServiceList" v-show="contactServiceActive">
            <li>消费者客服</li>
            <li>卖家客服</li>
          </ul>
        </li>
        <li class="nav nhover">
          <a>
            <i class="iconfont iconmenu hong xiao"></i>
            网站导航
          </a>
          <i class="iconfont iconjiantouxia xiaj"></i>
          <div class="navList"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "top",
  data() {
    return {
      chinaActive: false,
      myTaoBaoActive: false,
      bookmarkActive: false,
      sellerActive: false,
      contactServiceActive: false
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.top {
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
  .container {
    width: 1190px;
    height: 35px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-content: space-between;
    font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
    .item {
      display: grid;
      li {
        line-height: 35px;
        color: #6c6c6c;
        cursor: pointer;
        .login {
          color: #f22e00;
        }
        .register {
          margin-left: 8px;
        }
        &:hover {
          color: #f22e00;
        }
      }
      .nhover {
        &:hover {
          color: #6c6c6c;
        }
        a {
          &:hover {
            color: #f22e00;
          }
        }
      }
      .xiaj {
        font-size: 10px;
        margin-left: 6px;
        color: #9c9c9c;
      }
      .china {
        color: #3c3c3c;
        position: relative;
      }
      .hong {
        color: #f40;
        font-size: 14px;
      }
      .xiao {
        font-size: 10px;
      }
      .hui {
        font-size: 14px;
      }
      .shux {
        padding: 0 5px;
        color: #ddd;
        &:hover {
          color: #ddd;
        }
      }
    }
    .left {
      grid-template-columns: 90px 140px 76px;
      grid-template-rows: 35px;
      text-align: center;
      .china {
        position: relative;
        border-left: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        &:hover {
          color: #3c3c3c;
          cursor: auto;
          background: #fff;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
        }
        .yuyan {
          position: absolute;
          max-height: 270px;
          overflow-y: scroll;
          border: 1px solid #eee;
          margin-top: -0.5px;
          z-index: -1;
          margin-left: -1px;
          background: #fff;
          padding: 8px 0;
          li {
            width: 242px;
            height: 29px;
            line-height: 29px;
            padding-left: 8px;
            color: #3c3c3c;
            text-align: left;
            cursor: pointer;
            &:hover {
              color: #3c3c3c;
              background: #f4f4f4;
            }
          }
        }
      }
    }
    .right {
      justify-content: end;
      grid-template-columns: 80px 88px 88px 64px 20px 100px 80px 90px;
      grid-template-rows: 35px;
      li {
        text-align: center;
      }
      .myTaoBao {
        border-left: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        position: relative;
        &:hover {
          background: #fff;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
        }
        .myTaoBaoList {
          position: absolute;
          border: 1px solid #eee;
          background: #fff;
          padding: 8px 0;
          margin-top: -0.5px;
          z-index: -1;
          margin-left: -1px;
          li {
            padding: 0 5px;
            width: 74px;
            text-align: left;
            &:hover {
              color: #6c6c6c;
              background: #f4f4f4;
            }
          }
        }
      }
      .bookmark {
        border-left: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        margin-top: -0.5px;
        position: relative;
        &:hover {
          background: #fff;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          border-bottom: 1px solid #eee;
        }
        .bookmarkList {
          position: absolute;
          border-bottom: 1px solid #eee;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          background: #fff;
          padding: 8px 0;
          margin-top: -0.5px;
          z-index: 1;
          margin-left: -1px;
          li {
            padding: 0 5px;
            width: 62px;
            text-align: left;
            &:hover {
              color: #6c6c6c;
              background: #f4f4f4;
            }
          }
        }
      }
      .seller {
        border-left: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        margin-top: -0.5px;
        position: relative;
        &:hover {
          background: #fff;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          border-bottom: 1px solid #eee;
        }
        .sellerList {
          position: absolute;
          border-bottom: 1px solid #eee;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          background: #fff;
          padding: 8px 0;
          margin-top: -0.5px;
          z-index: 1;
          margin-left: -1px;
          li {
            padding: 0 5px;
            width: 72px;
            text-align: left;
            &:hover {
              color: #6c6c6c;
              background: #f4f4f4;
            }
          }
        }
      }
      .contactService {
        border-left: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        margin-top: -0.5px;
        position: relative;
        &:hover {
          background: #fff;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          border-bottom: 1px solid #eee;
        }
        .contactServiceList {
          position: absolute;
          border-bottom: 1px solid #eee;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          background: #fff;
          padding: 8px 0;
          margin-top: -0.5px;
          z-index: 1;
          margin-left: -1px;
          li {
            padding: 0 5px;
            width: 60px;
            text-align: left;
            &:hover {
              color: #6c6c6c;
              background: #f4f4f4;
            }
          }
        }
      }
      .nav {
        border-left: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        position: relative;
        &:hover {
          background: #fff;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
        }
        .navList {
          position: absolute;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          border-bottom: 1px solid #eee;
          background: #fff;
          margin-top: -0.5px;
          z-index: 1;
          right: -1px;
          width: 1188px;
          min-height: 258px;
          height: 312px;
        }
      }
    }
  }
}
</style>